/**
 * https://blog.csdn.net/qq_21567385/article/details/108383083 
 * http://wmm66.com/index/article/detail/id/165.html
 * .env.dev  开发环境
 * .env.prod  生产环境
 * 所声明的变量的引用方式
 * 在index.html中使用  %REACT_APP_ENV%
 * 在js/jsx中：process.env.REACT_APP_ENV
 * 需要注意的是react项目中自定义环境变量 环境变量开头需要REACT_APP_xxx，否则获取不到。
 */

const {
  override,
  addLessLoader,
  fixBabelImports,
  addWebpackPlugin
} = require("customize-cra");
const CompressionPlugin = require("compression-webpack-plugin");
const build_env = process.env.REACT_APP_ENV;
  
process.env.GENERATE_SOURCEMAP = 'false'; //去掉打包后的SOURCEMAP文件

const baseConfig = () => (config, env) => {

  //生产环境打包
  if (build_env === 'production') {

    //关闭devtool
    config.devtool = false;

    //去掉console.log
    invade(config.optimization.minimizer, 'TerserPlugin', (e) => {
      e.options.extractComments = false
      e.options.terserOptions.compress.drop_console = true
    });

  }

  // 美化打包后 js 文件名 去掉.chunk
  config.output.chunkFilename = config.output.chunkFilename.replace('.chunk', '')

  // 美化打包后 css 文件名 去掉.chunk
  invade(config.plugins, 'MiniCssExtractPlugin', (e) => {
    e.options.chunkFilename = e.options.chunkFilename.replace('.chunk', '')
  })
  
  return config;
}
module.exports = override(

  //基本配置
  baseConfig(),

  //开启gzip压缩，需要服务器同步配置gzip压缩
  // addWebpackPlugin(new CompressionPlugin({
  //   filename: '[path].gz[query]',
  //   algorithm: 'gzip',
  //   test: /\.js$|\.css$/,
  //   threshold: 10240, // 对超过10k的数据进行压缩
  //   minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  // })),

  // 添加 less-loader
  addLessLoader({
    javascriptEnabled: true,
  }),

);
/**
 * @param target: 要遍历的对象
 * @param name: 插件名
 * @param callback: 回调函数，第一个参数为该插件对象
 * @return null
 */
function invade(target, name, callback) {
  target.forEach(
    item => {
      if (item.constructor.name === name) {
        callback(item)
      }
    }
  )
}
